<template>
  <el-form
    :inline="true"
    label-width="70px"
    :data="formInline"
    style="text-align: right"
  >
    <!-- 上面增加的 -->
    <el-row>
      <el-col :span="6">
        <span class="text">说明：目前支持学科和关键字条件筛选</span>
      </el-col>
      <el-col
        :span="6"
        :offset="12"
        style="display: flex; justify-content: flex-end"
      >
        <el-button
          type="success"
          size="small"
          class="el-icon-edit"
          @click="$router.push({path:'new'})"
          >新增用户</el-button
        >
      </el-col>
    </el-row>
    <!-- 第一行 -->
    <el-row style="margin-top: 15px">
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select
            placeholder="请选择"
            v-model="formInline.subjectID"
            @change="handelSubject"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select
            placeholder="请选择"
            v-model="formInline.catalogID"
            @change="handelCatalog"
          >
            <el-option
              v-for="item in catalogList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签">
          <el-select placeholder="请选择" v-model="formInline.tags">
            <el-option
              v-for="item in tagsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input v-model="formInline.keyword" style="width: 221px" placeholder="根据题干搜索"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row>
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select placeholder="请选择" v-model="formInline.questionType">
            <el-option
              v-for="item in questionTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select placeholder="请选择" v-model="formInline.difficulty">
            <el-option
              v-for="item in difficultyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select placeholder="请选择" v-model="formInline.direction">
            <el-option
              v-for="item in directionList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select placeholder="请选择" v-model="formInline.creator">
            <el-option
              v-for="item in creatorList"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row>
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input
            v-model="formInline.remarks"
            style="width: 221px"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input
            v-model="formInline.enterpriseID"
            style="width: 221px"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="城市">
          <div class="el-form-item__content">
            <el-select
              placeholder="请选择"
              style="width: 48%"
              v-model="formInline.province"
              @change="handelCity"
            >
              <el-option
                v-for="item in province"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              collapse-tags
              style="width: 48%; margin-left: 8px"
              v-model="formInline.city"
            >
              <el-option
                v-for="item in city"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <div style="display: flex; justify-content: flex-end">
          <el-form-item>
            <el-button size="mini">清除</el-button>
            <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { list } from '@/api/hmmm/questions'
import { simple } from '@/api/base/users'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { simpleList } from '@/api/hmmm/subjects'
import { mlSimple } from '@/api/hmmm/directorys'
import { tagsSimple } from '@/api/hmmm/tags'
export default {
  data () {
    return {
      params: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      questionData: [],
      questionTypeList: [],
      difficultyList: [],
      directionList: [],
      simpleList: [],
      creatorList: [],
      province: [],
      city: [],
      subjectList: [],
      catalogList: [],
      tagsList: [],
      formInline: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      counts: 0
    }
  },
  created () {
    this.list()
    this.simple()
    this.getSimpleList()
    this.questionTypeList = questionType
    this.difficultyList = difficulty
    this.directionList = direction
    this.province = provinces()
  },
  methods: {
    async list () {
      const res = await list(this.params)
      this.questionData = res.data.items
      this.counts = res.data.counts
      // console.log(this.questionData)
    },
    async simple () {
      const res = await simple()
      this.creatorList = res.data
    },
    handelCity () {
      console.log(this.formInline)
      this.city = citys(this.formInline.province)
      console.log(this.city)
    },
    async getSimpleList () {
      const res = await simpleList()
      this.subjectList = res.data
    },
    async handelSubject () {
      const res = await mlSimple(this.params)
      this.catalogList = res.data
    },
    async handelCatalog () {
      const res = await tagsSimple()
      this.tagsList = res.data
    },
    // async handleSearch () {
    //   const res = await list(this.params)
    //   console.log(res)
    //   this.questionData = res.data.items
    //   console.log(this.questionData)
    //   this.list()
    // }
    handleSearch () {
      this.$emit('handleSearch', this.formInline)
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item__content {
  width: 214px;
}
.text {
  font-size: 12px;
  color: pink;
}
</style>
